<template>
  <div id="flow">
    <ul id="list">
      <li v-for="(item, index) in items" :key="index" @click="details(item.id)">
        <h3 :class="getTabInfo(item.tab, item.good, item.top, true)"
            :title="getTabInfo(item.tab, item.good, item.top, false)">
            {{item.title}}
        </h3>
        <div class="content">
          <img :src="item.author.avatar_url" alt="">
          <div class="contentInfo">
            <p class="contentInfoT">
              <span class="name">{{item.author.loginname}}</span>
              <span class="status">
                <b>{{item.reply_count}}</b>
                /
                <strong>{{item.visit_count}}</strong>
              </span>
            </p>
            <p class="contentInfoB">
              <time>{{item.last_reply_at | begin(item.create_at)}}</time>
              <time>{{item.last_reply_at | lastDay}}</time>
            </p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import axios from 'axios'
  import { getTabInfo } from '../lib/public.js'
  export default {
    name: 'list',
    data () {
      return {
        items: [],
        page: 0
      }
    },
    mounted: function () {
      this.$nextTick(function () {
        this.getData()
        var flow = document.getElementById('flow')
        flow.addEventListener('scroll', this.throttle(this.isScroll, 300, 1000))
      })
    },
    filters: {
      begin (a, b) {
        return Math.ceil((new Date(a).getTime() - new Date(b).getTime()) / (3600000 * 24)) + '天前创建'
      },
      lastDay (a) {
        return '最后访问时间是' + Math.ceil((new Date().getTime() - new Date(a).getTime()) / (3600000 * 24)) + '天前'
      }
    },
    methods: {
      getTabInfo (tab, good, top, isClass) {
        return getTabInfo(tab, good, top, isClass)
      },
      details (a) {
        this.$router.push({name: 'detail', params: { id: a }})
      },
      getData () {
        var name = this.$route.query.tab
        this.page += 1
        axios({
          url: 'https://cnodejs.org/api/v1/topics',
          type: 'get',
          params: {
            tab: name,
            limit: 20,
            page: this.page
          }
        }).then((response) => {
          if (this.page === 1) {
            console.log(response.data.data)
            this.items = response.data.data
          } else {
            this.items.push(...response.data.data)
          }
        }).catch((response) => {
          console.log(response.data)
        })
      },
      throttle (fn, wait, mustRun) {
        let timeout
        let startTime = new Date()
        return function () {
          let curTime = new Date()
          clearTimeout(timeout)
          // 如果达到了规定的触发时间间隔，触发 handler
          if (curTime - startTime >= mustRun) {
            fn()
            startTime = curTime
            // 没达到触发间隔，重新设定定时器
          } else {
            timeout = setTimeout(fn, wait)
          }
        }
      },
      isScroll () {
        var flow = document.getElementById('flow')
        var doc = document.getElementById('list')
        if (flow.scrollTop + flow.offsetHeight + doc.offsetHeight / 2 >= doc.offsetHeight) {
          this.getData()
        }
      }
    },
    watch: {
      '$route' () {
        this.page = 0
        var flow = document.getElementById('flow')
        flow.scrollTo(0, 0)
        this.getData()
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  #flow{
    position: absolute;
    left:0rem;
    top:0.81rem;
    bottom: 0;
    right:0 ;
    overflow: hidden;
    overflow-Y: auto;
  }
  #list{
    li{
      padding: 10px 15px;
      border-bottom: 1px solid #d5dbdb;
      h3{
        color: #2c3e50;
        font-size: 0.32rem;
        /*line-height: 1.5;*/
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        &:before{
          content: attr(title);
          display: inline;
          /*font-size:0.32rem;*/
          padding:0.1rem 0.2rem;
          margin-right: 0.5rem;
          color: #fff;
          -webkit-border-radius: 0.2rem;
          -moz-border-radius: 0.2rem;
          border-radius: 0.2rem;
        }
        &.top:before {
          background: #E74C3C;
        }
        &.ask:before {
          background: #3498DB;
        }
        &.good:before {
          background: #E67E22;
        }
        &.job:before {
          background: #9B59B6;
        }
        &.share:before {
          background: #1ABC9C;
        }
      }
      .content{
        padding-top: 0.10rem;
        display: flex;
      }
      img{
        display: block;
        width: 0.7rem;
        height: 0.7rem;
        border-radius: 50%;
        margin-right: 0.10rem;
        border: 1px solid #f3f3f3;
      }
      .contentInfo{
        display: block;
        width: 100%;
        flex: 1;
        p{
          padding: 3px 0;
          display: flex;
          color: #34495e;
          font-size: 0.22rem;
          &:last-child{
            font-size: 0.18rem;
            time:first-child{
              display: block;
              width: 100%;
              flex: 1;
            }
          }
          b{
            color: #42b983;
          }
        }
        .name {
          display: block;
          width: 100%;
          flex: 1;
        }

      }
      .title{
        background-color: #ff3d43;
      }


    }
  }

</style>
